<template>
<!-- 退货20 -->
  <div>
    <header class="saleReturnHeaderBox">
      <van-row>
        <van-col class="saleReturnMarginTop" span="24">
          <van-row class="saleReturntextBox">
            <van-col @click="saleReturn">
              <van-icon name="arrow-left" size="40" />
            </van-col>
            <van-col> 申请退货 </van-col>
          </van-row>
        </van-col>
      </van-row>
    </header>
    <section style="margin-top: 55px"></section>
    <!-- 商铺信息 -->
    <section>
      <van-row>
        <van-col offset="1" class="saleReturnPaddingMax saleReturnFintSizeMax">
          商品信息
        </van-col>
      </van-row>
      <!--商铺信息 -->
      <van-row>
        <van-col
          span="24"
          class="saleReturnBorderStyleTop saleReturnPaddingSmall saleReturnFintSizeSmall"
        >
          <van-row>
            <van-col offset="1" span="23">
              <van-icon name="label-o" />
              XXX商铺
            </van-col>
          </van-row>
        </van-col>
      </van-row>
      <!--  商品信息-->
      <van-row class="saleReturnBorderStyleTop saleReturnPaddingTopSmall">
        <van-col offset="1" span="5">
          <van-image
            width="80"
            height="80"
            src="https://img01.yzcdn.cn/vant/cat.jpeg"
          />
        </van-col>
        <van-col offset="1" span="13" class="saleReturnPaddingMax">
          <van-row>
            <van-col class=""> 黑美人西瓜鲜美多汁2个起卖 </van-col>
          </van-row>
          <van-row>
            <van-col class="saleReturnFintSizeSmallS saleReturnPaddingSmallS">
              独立包装（1个装）X1
            </van-col>
          </van-row>
          <van-row>
            <van-col
              class="saleReturnFintSizeMax saleReturnFintColorRed saleReturnPaddingSmallS"
            >
              ￥38.8
            </van-col>
          </van-row>
        </van-col>
        <van-col offset="1" span="3" class="saleReturnPaddingMax  ">
            <van-checkbox v-model="checkedId" shape="square"  icon-size="24px" class="saleReturnPaddingXMax"></van-checkbox>
        </van-col>
      </van-row>
      <!--  商品信息-->
      <van-row class="saleReturnBorderStyleTop saleReturnPaddingTopSmall">
        <van-col offset="1" span="5">
          <van-image
            width="80"
            height="80"
            src="https://img01.yzcdn.cn/vant/cat.jpeg"
          />
        </van-col>
        <van-col offset="1" span="13" class="saleReturnPaddingMax">
          <van-row>
            <van-col class=""> 黑美人西瓜鲜美多汁2个起卖 </van-col>
          </van-row>
          <van-row>
            <van-col class="saleReturnFintSizeSmallS saleReturnPaddingSmallS">
              独立包装（1个装）X1
            </van-col>
          </van-row>
          <van-row>
            <van-col
              class="saleReturnFintSizeMax saleReturnFintColorRed saleReturnPaddingSmallS"
            >
              ￥38.8
            </van-col>
          </van-row>
        </van-col>
        <van-col offset="1" span="3" class="saleReturnPaddingMax  ">
            <van-checkbox v-model="checked" shape="square"  icon-size="24px" class="saleReturnPaddingXMax"></van-checkbox>
        </van-col>
      </van-row>
    </section>
    <footer>
        <van-row class="saleReturnBroder" @click="refundNext">
            <van-col offset="1" span="20" class="saleReturnPaddingMax">
                仅退货
            </van-col>
            <van-col offset="1" class="saleReturnPaddingMax">
                <van-icon name="arrow" size="25px"/>
            </van-col>
        </van-row>
    </footer>
  </div>
</template>

<script>
export default {
    data(){
        return{
            checked:false,
            checkedId:false,
        }
        
    },
    methods:{
        saleReturn(){
            this.$router.back();
        },
        refundNext(){
            this.$router.push('/refundMoney');
        }
    }
};
</script>

<style>
.saleReturnHeaderBox {
  position: fixed;
  top: 0;
  width: 100%;
  height: 35px;
  background-color: #4bd863;
  z-index: 9999;
  padding: 10px 0;
}
.saleReturnBroder {
  border-top: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
}
.saleReturnMarginTop {
  /* margin-top: 35px; */
}
.saleReturntextBox {
  height: 50px;
  line-height: 40px;
  font-size: 20px;
  font-weight: 700;
  color: #fff;
}
.saleReturnPaddingMax {
  padding: 15px 0;
}
.saleReturnPaddingXMax {
  padding: 20px 0;
}
.saleReturnFintSizeMax {
  font-size: 18px;
  font-weight: 700;
}
.saleReturnBorderStyleTop {
  border-top: 1px solid #ccc;
}
.saleReturnPaddingTopSmall {
  padding-top: 10px;
}
.saleReturnPaddingSmall {
  padding: 10px 0;
}
.saleReturnFintSizeSmall {
  font-size: 16px;
  font-weight: 700;
}
.saleReturnFintColorRed {
  color: red;
}
</style>